<template>
	<div class="article_comment">
		<!-- 头部导航栏 -->
		<van-nav-bar fixed placeholder title="精彩跟帖" left-text="返回" left-arrow @click-left="$router.back()">
		</van-nav-bar>

		<!-- 评论列表主体 -->
		<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
			<div class="comment_list">
				<div class="comment_item" v-for="item in commentList" :key="item.id">
					<!-- 评论体头部 -->
					<div class="item_top">
						<div class="avator">
							<van-image round width="100%" height="100%" fit="cover" class="item_img"
								:src="item.user.head_img | imgUrl" />
						</div>
						<div class="item_info">
							<span class="name">{{item.user.nickname}}</span>
							<span class="date">{{item.create_date | formatDate}}</span>
						</div>
						<span class="reply" @click="reply(item)">回复</span>
					</div>

					<!-- 父评论列表 -->
					<CommentItem v-if="item.parent" :parent="item.parent" @parentReply="reply"></CommentItem>
					<!-- 评论底部 -->
					<div class="item_content">
						<p class="comment">{{item.content}}</p>
					</div>
				</div>
			</div>
		</van-list>


		<!-- 底部评论输入框 -->
		<MyComment :article="article" @sendClick="sendBtn" ref="MyComment" :commentTemp="commentTemp"></MyComment>
	</div>
</template>

<script>
	import {
		articleCommentApi,
		getPostDetailsApi,
		postCommentApi
	} from '../apis/news.js'
	import CommentItem from '../components/CommentItem.vue'
	import MyComment from '../components/MyComment.vue'
	export default {
		components: {
			CommentItem,
			MyComment,
		},

		data() {
			return {
				id: this.$route.params.id,
				commentList: [],
				article: {},
				commentTemp: null,
				pageIndex: 1,
				pageSize: 10,
				finished: false,
				loading: false
			}
		},
		async created() {
			const res = await articleCommentApi(this.id, {
				pageIndex: this.pageIndex,
				pageSize: this.pageSize
			});
			const res2 = await getPostDetailsApi(this.id);
			this.article = res2.data.data;
			this.commentList = res.data.data;


		},

		methods: {
			async onLoad(){
				this.pageIndex++;
				await articleCommentApi(this.id, {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize
				})
				.then(res => {
					this.commentList.push(...res.data.data);
					this.loading = false;
					if(res.data.data.length === 0) return this.finished = true;
				})

			},
			
			
			async sendBtn(val, cb) {
				if (val === '') return this.$toast('请输入回复内容');
				/* 昵称判断 */
				const endIndex = val.indexOf('：');
				if (this.commentTemp) {
					const {
						nickname
					} = this.commentTemp.user;
					const val_name = val.substring(1, endIndex);
					if (val_name !== nickname) {
						this.commentTemp = null;
					}
				} else {
					this.commentTemp = null;
				}
				/* 请求阶段 */
				await postCommentApi(this.id, {
						content: val,
						parent_id: this.commentTemp && this.commentTemp.id
					})
					.then(async (res) => {
						cb('');
						this.$toast.success(res.data.message);
						this.commentTemp = null;
						await articleCommentApi(this.id, {
								pageIndex: 1,
								pageSize: 20
							})
							.then((commentRes) => {
								this.commentList = commentRes.data.data;
								window.scrollTo({
									top: 0,
									behavior: 'smooth'
								})
							})
					})

			},

			//回复
			reply(item) {
				this.$refs.MyComment.inputFn();
				this.commentTemp = item;
				console.log(item);
			},
		}
	}
</script>

<style lang="less" scoped>
	.comment_list {
		background-color: #eeeeee;

		.item_content {
			width: 100%;
			margin: 10px 0;

			.comment {
				margin-left: 3px;
				font-size: 17px;
				width: 100%;
				word-wrap: break-word;
				word-break: break-all;
			}
		}

		.comment_item {
			padding: 10px;
			border-bottom: 1px solid #aaaaaa;

			.item_top {
				display: flex;

				.avator {
					width: 55px;
					height: 55px;
					margin-left: 10px;
				}

				.item_info {
					flex: 1;
					display: flex;
					flex-direction: column;
					margin-left: 30px;
					justify-content: space-evenly;
					padding-bottom: 9px;

					.name {
						font-size: 17px;
					}

					.date {
						font-size: 14px;
						padding-top: 5px;
						color: #888888;
					}
				}

				.reply {
					color: #888888;
					font-size: 14px;
					padding-top: 3px;
					height: 20px;
				}
			}
		}
	}
</style>
